<template>
    <view >
<!-- 头部信息渲染 开始-->
     <view class="header_tap">
         <view class="header_img"
         >
             <image mode="widthFix" :src="imgDelete.user.avatar" ></image>
         </view>
         <view class="header_hst">
             <view class="wen_top">{{imgDelete.user.name}}</view>
             <view class="wen_buttom">{{imgDelete.ctime}}</view>
         </view>
     </view>
<!-- 头部信息渲染 结束-->
<!-- 高清大图开始 -->
<view class="bag_img" @touchstart="handleChenge"
 @touchend="handleEnd"
 
>
    <!-- +imgDelete.rule.replace('$<Height>',360) -->
    <image mode="aspectFill"  @longtap="handlebtn" :src="imgDelete.thumb"></image>
    <view class="dianz">
        <view class="dianz_left">
            <text class="iconfont icon-zanpress">{{imgDelete.rank}}</text>
        </view>
        <view class="dianz_right">
            <text class="iconfont icon-shoucang"></text>
            收藏
        </view>
    </view>
</view>
<!-- 高清大图结束 -->

<!-- 相关专辑图片开始 -->

<view class="album_wrap">
    <!-- 标题 -->
    <view class="album_title">
        相关
    </view>
   <view class="album_content"
   v-for="item in album"
   :key="item.id"
   >
       <view class="album_zhuanji">
           <image mode="aspectFill" :src="item.cover"></image>
       </view>
       <view class="album_text">
           <view class="wen_top">
               专辑
           </view>
           <view class="wen_name">
             {{item.name}}
           </view>
           <text class="iconfont icon-iconfontyoujiantou"></text>
       </view>
   </view>
</view>
<!-- 相关专辑图片结束 -->
<!-- 最热评论开始 -->
<view class="comments_list" v-if="comment.length>0">
     <view class="title_icon">
         <text class="iconfont icon-hot"></text>
           最热评论
     </view>
    <view class="comments_item"
    v-for="item in comment"
    :key="item.id"
    >
        <view class="comment_left">
            <image mode="aspectFill" :src="item.user.avatar"></image>
        </view>
        <view class="comment_right">
            <view class="comment_top">
                <view class="wen_top">{{item.user.name}}</view>
                <view class="wen_buttom">{{item.atime}}</view>
            </view>
            <view class="comment_buttom">
                <view class="button_left">{{item.content}}</view>
                <view class="buttom_right">
                    <text class="iconfont icon-zanpress"></text>
                   {{item.size}}
                </view>
            </view>
        </view>
    </view>
</view>
<!-- 最热评论结束 -->
<!-- 最新评论开始 -->
<view class="comments_list" v-if="hot.length>0">
     <view class="title_icon">
         <text class="iconfont icon-pinglun"></text>
           最新评论
     </view>
    <view class="comments_item"
    v-for="item in hot"
    :key="item.id"
    >
        <view class="comment_left">
            <image mode="aspectFill" :src="item.user.avatar"></image>
        </view>
        <view class="comment_right">
            <view class="comment_top">
                <view class="wen_top">{{item.user.name}}</view>
                <view class="wen_buttom">{{item.atime}}</view>
            </view>
            <view class="comment_buttom">
                <view class="button_left">{{item.content}}</view>
                <view class="buttom_right">
                    <text class="iconfont icon-zanpress"></text>
                   {{item.size}}
                </view>
            </view>
        </view>
    </view>
</view>
<!-- 最新评论结束 -->
<!-- 下载素材开始 -->
<view class="downlond" v-show="fag">
    <view  class="down_btn" @tap="down">
        下载图片素材
    </view>
</view>
<!-- 下载素材结束 -->
<!-- 蒙层开始 -->
<view class="m-c" v-show="fag" @tap="hide"></view>
<!-- 蒙层结束 -->
    </view>
</template>

<script>
// 导入moment
import moment from "moment"
// 转换成中文
moment.locale("zh-cn")
export default {
    data(){
        return {
          imgDelete:{},
          album:[],
          comment:[],
          hot:[],
          X:0,
          X2:0,
          Bx:0,
          imgindex:null,
          length:null,
          fag:false,
        }
    },
    onLoad(){
        console.log(getApp().globalData)
        const {imglist,imgindex}=getApp().globalData
        this.length=imglist.length
        this.imgindex=parseInt(imgindex)
        this.imgDelete=imglist[imgindex]
        console.log(this.imgDelete)
        // 获取发布时间
        this.imgDelete.ctime=moment(this.imgDelete.atime*1000).fromNow()
        // 调用评论请求
        this.getComment(this.imgDelete.id)
    },
    methods:{
        getComment(id){
            this.request({
                url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
            })
            .then(result=>{
                console.log(result)
                this.album=result.res.album
                this.comment=result.res.comment
                // 获取发布到至今的时间
                this.comment.map(v=>
                 v.atime=moment( v.atime*1000).fromNow()
                )
                this.hot=result.res.hot
                 // 获取发布到至今的时间
                this.hot.map(v=>
                 v.atime=moment( v.atime*1000).fromNow()
                )
            })
        },
        // 按下屏幕事件
        handleChenge(event){
        //    console.log(event.changedTouches[0].clientX)
        //     console.log(event.changedTouches[0].clientY)
        this.X=event.changedTouches[0].clientX
        },
        // 离开屏幕事件
        handleEnd(event){
            
            console.log(event.changedTouches[0].clientX)
            console.log(event.changedTouches[0].clientY)

         this.X2=event.changedTouches[0].clientX
          if(Math.abs(this.X-this.X2)<50)  return;
         if(this.X-this.X2>0){
            // const imglist=getApp().globalData.imglist
            if(this.length===this.imgindex+1){
                 uni.showToast({
                     title: '最后一张了',
                     icon: 'none',
                 });
                return ;
            }
              this.imgindex+=1
            const imglist=getApp().globalData.imglist
            // console.log(imglist[imgindex+"1"])
            let index=parseInt(this.imgindex)
            this.imgDelete=imglist[index]
            // 获取发布时间
            this.imgDelete.ctime=moment(this.imgDelete.atime*1000).fromNow()
              // 调用评论请求
            this.getComment(this.imgDelete.id)
            //  this.getComment(this.imgDelete.id+1)
         }else{
             this.imgindex-=1
             if(this.imgindex<=0){
                 uni.showToast({
                     title: '第一张',
                     icon: 'none',
                 });
                 return;
             }
           const imglist=getApp().globalData.imglist
           let index=parseInt(this.imgindex)
            // console.log(index)
           this.imgDelete=imglist[index]
           // 获取发布时间
           this.imgDelete.ctime=moment(this.imgDelete.atime*1000).fromNow()
               // 调用评论请求
           this.getComment(this.imgDelete.id)
            //  this.getComment(this.imgDelete.id-1)
         }
        },
        // 长按屏幕事件
        handlebtn(){
            console.log("长按了")
            this.fag=!this.fag
        },
        // 取消下载壁纸
        hide(){
             this.fag=!this.fag
        },

        // 点击下载图片
        async down(){
            // 将远程文件下载到小程序内存当中tempFilEpath
            const result1=await uni.downloadFile({url:this.imgDelete.img})
             console.log(result1)
            const {tempFilePath}=result1[1];
            
            // 2.将小程序内存中的零时文件下载到本地当中
           const result2 =await uni.saveImageToPhotosAlbum({filePath:tempFilePath})
           console.log(result2)
        //   当取消授权的情况下再吃打开授权
//             if (result2[0].errMsg === "saveImageToPhotosAlbum:fail auth deny") {
//                      console.log("打开设置窗口");
//                      wx.openSetting({
//                                success(settingdata) {
//                                         console.log(settingdata)
//                                        if (settingdata.authSetting["scope.writePhotosAlbum"]) {
//                                                  console.log("获取权限成功，再次点击图片保存到相册")
//                                        } else {
//                                                  console.log("获取权限失败")
//                                        }
//                                }
//                       })
//              }
            this.fag=!this.fag
            uni.showToast({
                title: '下载完成',
                icon: 'none',
            });

        }
    }
}
</script>

<style lang="scss" scoped>
  .header_tap{
      padding:20rpx;
      display:flex;
      align-items: center;
      .header_img{
          width:50rpx;
          height:50rpx;
          border-radius: 50%;
      }
      .header_hst{
          .wen_top{
              font-size:30rpx;
              color:black;
          }
          .wen_buttom{
              color:#888888;
              font-size:25rpx;
          }
      }
  }  
  .bag_img{
      image{
          max-height:720rpx;
      }
      .dianz{
          display: flex;
          align-items: center;
          border:1px solid #cccccc;
          color:#888888;
          padding:20rpx;
          .dianz_left{
              flex:1;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .dianz_right{
               flex:1;
              display: flex;
              justify-content: center;
              align-items: center;
          }
      }
  }
  .album_wrap {


  .album_title {
    color:black;
    font-size:30rpx;
    font-weight:550;
    padding:15rpx;
  }

  .album_content {
      display:flex;
      padding:20rpx;
      border-bottom: 10rpx solid #eee;
    .album_zhuanji {
        flex:1;
        margin-right:30rpx;
      image {
        width:200rpx;
        height:200rpx;
      }
    }

    .album_text {
        flex:3;
        position: relative;
      .wen_top {
         width:150rpx;
         padding:15rpx 20rpx;
         background-color: $color;
         border-radius: 10rpx;
         display: flex;
         justify-content: center;
         align-items: center;
         color:white;
         margin-bottom: 40rpx;
      }

      .wen_name {
       color:black;
      }

      text.iconfont.icon-iconfontyoujiantou {
         position: absolute;
         top:50%;
         right:10%;
         transform:translateY(-50%);
         font-size:36rpx;
      }
    }
  }
}

.comments_list {
  .title_icon{
      padding:20rpx;
      text{
          color:$color;
      }
  }
  .comments_item {
      display:flex;
      padding:20rpx;
      border:10rpx solid #eee;
    .comment_left {
        flex:1;
        display:flex;
        justify-content: center;
      image {
          width:80rpx;
          height:80rpx;
         display: inline-block;
         border-radius: 50%;
      }
    }

    .comment_right {
        margin-left:30rpx;
        flex:4;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
      .comment_top {
        .wen_top {
         
        }

        .wen_buttom {
         
        }
      }

      .comment_buttom {
          padding-top:30rpx;
          display:flex;
          justify-content: space-between;
          align-items: center;
        .button_left {

        }

        .buttom_right {
          text.iconfont.icon-zanpress {

          }
        }
      }
    }
  }
}
.downlond{
    position:fixed;
    z-index: 100;
    bottom:0;
    left:0;
    width:100%;
    padding:30rpx;
    background-color: white;
    border-radius: 5rpx;
    border:1px solid #eee;
    .down_btn{
        width:100%;
        padding:20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        background-color: $color;
        font-size:36rpx;
        font-weight: 550;
        border-radius:10rpx;
    }
}
.m-c{
    width:100vw;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.6);
}
</style>